<template>
  <view class="my-list">
    <block v-for="(item,index) in list" :key="index">
      <view class="gui-list-items" @click="$emit('click',item,index)">
        <view class="gui-relative">
          <image
              :src="`/static/informations/ifon${type==='sys'?1:2}.png`"></image>
        </view>
        <view class="gui-list-body">
          <view class="gui-list-title">
            <text class="gui-list-title-text gui-primary-color u-line-1">{{item.title}}</text>
            <text class="gui-list-title-desc gui-color-gray">{{ moCreateTime[index]}}
              <text class="isRead" :class="{'red-point':item.isRead===0}"></text>
            </text>
          </view>
          <text class="gui-list-body-desc gui-color-gray u-line-1">{{item.content}}</text>

        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: 'list' ,
  props: {
    type:{
      type:String,
      default:'sys'
    },
    //列表
    list:{
      required:true,
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  computed:{
    //改变为yyyy年MM月DD
    moCreateTime(){
      return this.list.map(({createTime})=>this.$moment(createTime).format('yyyy年MM月DD日'))

    }
  },
}
</script>

<style scoped lang="scss">
.my-list{
  .gui-list-items{
    margin:20upx 22upx;
    width: 706upx;
    height: 135upx;
    background: #fff;
    border-radius: 13upx;
    .gui-relative{
      padding-left: 31upx;
      image{
        width:85upx;
        height:85upx;
      }
    }
    .gui-list-body{
      .gui-list-title{
        .gui-primary-color{
          width: auto;
          font-size: 30upx;
          height:auto;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2F2F2F;
          white-space: nowrap;
        }
        .gui-color-gray{
          width: auto;
          font-size: 24upx;
          height:23rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #868686;
          padding-right: 23upx;
          white-space: nowrap;
        }
      }
      .gui-list-body-desc{
        width: 500rpx;
        font-size: 28upx;
        height:26rpx;
        line-height:26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #868686;
        padding:29upx 23upx 26upx 0;
      }
    }
  }
}
.isRead{
  padding-left: 10rpx;
}
.red-point{
  position: relative;
}

.red-point::before{
  content: " ";
  border: 5rpx solid red;/*设置红色*/
  border-radius:5rpx;/*设置圆角*/
  position: absolute;
  z-index: 1000;
  right: 0%;
  margin-right: -5rpx;
  margin-top: 0rpx;
}
</style>
